<template>
  <div>
    <pull-to
      :bottom-load-method="infiniteHandler"
      :bottom-config="BOTTOM_DEFAULT_CONFIG" class="main-wrap" style="min-height: 100vh;background:#f5f5f5">
      <div>
        <div class="categoryList">
          <van-tabs v-model="active" :sticky='true'>
            <van-tab :title="item.name" v-for="(item,index) in categoryList" :key="index">
              <van-tabs v-model="active1[index]" v-if="item.info" @change="active1Fun(index)" :sticky='true'>
                <van-tab :title="item1.name" v-for="(item1,index1) in item.info" :key="index1">
                  <ul class="goodsList" v-if="guessLick.length>0">
                    <li class="goods" v-for="(item2,index2) in guessLick" :key="index2">
                      <router-link :to="'/detail?type=1&group_id=0&join_id=0&limit_id=0&goods_id='+item2.goods_id">
                        <div class="pic">
                          <img :src="item2.image" alt="">
                        </div>
                        <div class="msg">
                          <p class="title" v-html="item2.goods_name"></p>
                          <span class="goodsPrice">￥{{item2.sell_price}}</span>
                          <span class="popular"><img src="@/assets/img/fire.png"><span>{{item2.popularity}}</span></span>
                        </div>
                      </router-link>
                    </li>
                  </ul>
                  <div v-else>
                    <div v-if="isNone" class="listNone">
                      <img src="@/assets/img/empty.png" alt="">
                      <p>该分类暂无数据</p>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
              <div v-else>
                <ul class="goodsList" v-if="guessLick.length">
                <li class="goods" v-for="(item1,index1) in guessLick" :key="index1">
                  <router-link :to="'/detail?type=1&group_id=0&join_id=0&limit_id=0&goods_id='+item1.goods_id">
                  <div class="pic">
                    <img :src="item1.image" alt="">
                  </div>
                  <div class="msg">
                    <p class="title" v-html="item1.goods_name"></p>
                    <span class="goodsPrice">￥{{item1.sell_price}}</span>
                    <span class="popular"><img src="@/assets/img/fire.png"><span>{{item1.popularity}}</span></span>
                  </div>
                  </router-link>
                </li>
              </ul>
              <div v-else>
                    <div v-if="isNone" class="listNone">
                      <img src="@/assets/img/empty.png" alt="">
                      <p>该分类暂无数据</p>
                    </div>
                  </div>
              </div>
              
            </van-tab>
          </van-tabs>

        </div>


      </div>
    </pull-to>
  </div>

</template>

<script>

  import request from "@/request/index.js"
  import PullTo from 'vue-pull-to';
  export default {
    name: "getGoodsByCid",
    components: {
      PullTo,
    },
    data() {
      return {
        active:0,
        active1:[],
        page:1,
        list:1,
        type:0,
        data:{},
        guessLick:[],
        isNone:false,
        loading:false,
        allPage:0,
        categoryList:[],
        category_id:0,
        BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
        },
      }
    },
    watch:{
      type(newVal,oldVal){
        this.guessLick=[];
        request.allGoods(this);
      },
      active(newVal,oldVal){
        this.guessLick=[];
        this.categoryList.forEach((v,i)=>{
          if(newVal==i){
            this.category_id=v.id;
          }
        })
        request.getGoodsByCid(this);

      },
    },
    methods:{
      infiniteHandler:function(loaded){
        this.page++;
        if(this.page<this.allPage){
          this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
          loaded("done");
          request.getGoodsByCid(this);
        }else{
          this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
          loaded("done");
          request.getGoodsByCid(this);
        }
      },
      active1Fun(num){
        this.guessLick=[];
        this.category_id=this.categoryList[num].info[this.active1[num]].id
        request.getGoodsByCid(this);
      }

    },
    mounted() {
      request.categoryList(this)
    },
  }
</script>

<style scoped lang="scss">
.listNone{
  text-align: center;
  padding-top: 150px;
  img{
    width: 114px;

  }
}
  .categoryList{
    .van-tab{
      background-color: #333333!important;
    }
  }
  .foundNot{
    text-align: center;
    padding-top: 90px;
    img{
      width: 120px;
      margin-bottom: 20px;
    }
  }
  .noteType{
    display: flex;
    justify-content: space-between;
    padding: 0 4vw;
    margin: 10px 0;
    .noteTypes:first-child{
      color: #FF4C50;

    }
    ul{
      display: flex;
      justify-content: space-between;
      width: 60px;
      font-size:12px;
    }
    span{
      font-size: 12px;
    }
  }
  .goodsType{
    display: flex;
    justify-content: space-around;
    font-size:12px;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 4vw;
    margin: 10px 0;
    .goodsTypes:first-child{
      color:#FF4C50;
    }
  }
  .van-tabs__content{
    margin-top: 10px !important;
  }
  .noteList{
    display:flex;
    justify-content: space-between;
    padding: 4vw 4vw;
    flex-wrap: wrap;
    background: #f5f5f5;
    .notes{
      width:44vw;
      border-radius: 8px;
      background:#ffffff;
      .pic{
        height: 44vw;
        width: 44vw;
        line-height: 44vw;
        overflow: hidden;
        img{
          width: 100%;

        }
      }
      .headIcon{
        width:25px;
        height: 25px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
        img{
          width: 100%;

        }
      }
      .msg{
        padding:8px 12px;

      }
      .userName{
        vertical-align: middle;
        font-size:13px;
        color:#333333;
      }
      .title{
        width: 100%;
        height: 45px;
        font-size: 13px;
        color: #333333;
        line-height: 22px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        // padding: 0 12px;
      }
      .popular{
        float:right;
        img{
          width:13px;
          vertical-align: middle;
          margin-right: 5px;
        }
        span{
          font-size: 12px;
          vertical-align: middle;
        }
      }
    }
  }
  .goodsList{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4vw 4vw;
    background: #f5f5f5;
    .goods{
      width:44vw;
      border-radius: 8px;
      background:#ffffff;
      margin-bottom: 15px;
      overflow: hidden;
      .pic{
        height: 44vw;
        width: 44vw;
        line-height: 44vw;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .headIcon{
        width:25px;
        height: 25px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
        img{
          width: 100%;

        }
      }
      .msg{
        padding:8px 12px;

      }
      .goodsPrice{
        vertical-align: middle;
        font-size:14px;
        color:#FF4C50;
      }
      .title{
        width: 100%;
        height: 45px;
        font-size: 13px;
        color: #333333;
        line-height: 22px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        // padding: 0 12px;
      }
      .popular{
        float:right;
        img{
          width:13px;
          vertical-align: middle;
          margin-right: 2px;
        }
        span{
          font-size: 12px;
          vertical-align: middle;
        }
      }
    }
  }
  .userList{
    padding: 12px 4vw;
    background: #f5f5f5;
    li{
      border-radius: 8px;
      background:#ffffff;
      padding:12px 22px 12px 12px;
    }
    .headIcon{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      img{
        width: 100%;
      }

    }
    .userName{
      font-size: 14px;
    }
    .userId{
      color:#666666;
      font-size: 12px;
    }
    .contentBtn{
      height: 24px;
      width: 60px;
      text-align: center;
      line-height: 24px;
      background: #FF4C50;
      color: #ffffff;
      border-radius: 50px;
      vertical-align: middle;
    }
    .contentBtn1{
      height: 24px;
      width: 60px;
      text-align: center;
      line-height: 24px;
      background: #CCCCCC;
      color: #ffffff;
      border-radius: 50px;
      vertical-align: middle;
    }
    .note{
      line-height: 2em;
      color: #333333;
    }
  }

</style>
